<template>
  <div class="app-container-10 container-f0f2f5 app-main system-role-container">
    <div class=" container-fff app-container-15 app-ele-border-radius-0">
      <!--角色列表-->
      <div class="sys-content-role">
        <!--操作-->
        <div class="sys-btn-box">
          <el-button size="small" type="primary" icon="el-icon-plus" @click="addNewRole">新增</el-button>
          <!-- 多选后删除-->
          <el-button size="small" type="danger" icon="el-icon-delete" :disabled="!delRoleList.length" @click="isCan">删除
          </el-button>
        </div>
        <evue-table :data="roleData" :option="roleOption" @selectionChange="selectionChange"
                    @handleEdit="handleEdit" @handleDelete="handleDelete">
          <template v-slot:roleStatus="props">
            <el-switch
                    v-model="props.data.status"
                    :active-value="1"
                    :inactive-value="0"
            >
            </el-switch>
          </template>
          <template v-slot:menu="props">
            <el-button size="mini" type="text"
                       @click="$router.push({name:'systemRoleAssigningUsers',query:{id:props.data.id}})">分配用户
            </el-button>
          </template>
        </evue-table>
      </div>
    </div>
    <!--新增角色-->
    <el-dialog
            custom-class="up-dialog"
            :close-on-click-modal="false"
            top="5vh"
            :title="addRoleFormData.id ? '编辑用户':'添加用户'"
            :visible.sync="dialogAddRole"
            width="800px"
    >
      <div class="dialog-content add-user-pop app-ele-border-radius-0">
        <evue-form ref="eVueForm" @submit="handleAddNewRole" v-model="addRoleFormData" :option="addRoleOption">
          <template v-slot:menuPower>
            <div class="menu-box">
              <el-tree
                      ref="menuTree"
                      v-loading="menuLoading"
                      :data="menuList"
                      show-checkbox
                      node-key="menuId"
                      :default-checked-keys="defaultCheckedMenuKeys"
                      :props="{children: 'children',label: 'menuName'}"
              >
              </el-tree>
            </div>
          </template>
          <template v-slot:roleStatus="props">
            <el-switch
                    v-model="props.data.status"
                    :active-value="1"
                    :inactive-value="0"
            >
            </el-switch>
          </template>
        </evue-form>
      </div>
      <div slot="footer" style="text-align: left">
        <el-button size="small" type="primary" @click="$refs.eVueForm.submit()">确定</el-button>
        <el-button size="small" @click="handleDialogAddUserClose">取消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import Role from './role'

  export default Role
</script>
